iT邦幫忙

2024 iThome 鐵人賽

DAY 8
0
自我挑戰組

asp.net可以變出那些功能系列 第 8

分頁跟按紐連結_影片

  • 分享至 

  • xImage
  •  

終於要來解釋第2天的分頁內容
在網站https://laihao2.com/Home/Index2
https://ithelp.ithome.com.tw/upload/images/20240915/20119035S92ub728X9.png
這裡分頁所使用的資料庫是
Northwind跟pubs北風資料庫
北風資料庫(Northwind)是微軟提供的一個範例資料庫
https://ithelp.ithome.com.tw/upload/images/20240915/20119035Uq7YrssgBa.png
北風資料庫(Northwind):這裡要用到的資料類型
https://ithelp.ithome.com.tw/upload/images/20240915/20119035olDjsKwhBz.png
北風資料庫(Northwind): 這裡要用到的內容
https://ithelp.ithome.com.tw/upload/images/20240915/20119035U748sMGxgv.png
這裡要特別注意的地方~
這裡要特別注意的地方~
這裡要特別注意的地方~

很重要所以說三次!!!
https://ithelp.ithome.com.tw/upload/images/20240915/20119035wumuMGeKqk.png
分頁:下載套件
https://ithelp.ithome.com.tw/upload/images/20240915/20119035fj19qSMlFq.png
下載完要將專案就是整個Microsoft Visual Studio重啟
下載完要將專案就是整個Microsoft Visual Studio重啟
https://ithelp.ithome.com.tw/upload/images/20240915/20119035YOceyt7chz.png
下載完要將專案就是整個Microsoft Visual Studio重啟
很重要所以說三次!!!

這樣專案才可以抓到下載的套件

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

資料表設定好>再寫程式:加入資料庫>串聯資料庫>(這裡前面的步驟可以參考前幾天)
https://ithelp.ithome.com.tw/upload/images/20240915/20119035nb2fOVinAP.png

產生Models裡面類別檔dao>第一個檔案
https://ithelp.ithome.com.tw/upload/images/20240915/20119035g2VoJ9TT8m.png
產生Models裡面類別檔dao>第2個檔案
https://ithelp.ithome.com.tw/upload/images/20240915/20119035hsFbEbc4Yz.png
按:建置>(參考前面)

Web config的第2個資料庫連線 (其實到網站的部屬連線也是改這樣的形式)
https://ithelp.ithome.com.tw/upload/images/20240915/20119035wi0SteGWBD.png
Controllers裡面的Entities>
https://ithelp.ithome.com.tw/upload/images/20240915/20119035DvEYiAUb2D.png

public ActionResult Index2(int page = 1)
        {
            int currentPage = page < 1 ? 1 : page;
            var products = _db2.Products2.OrderBy(m => m.ProductID).ToList();
            var result = products.ToPagedList(currentPage, pageSize);
            return View(result);
        }

解釋程式碼:
這段代碼是一個 ASP.NET MVC 控制器中的 Index2 方法,用於分頁顯示產品數據。我們來逐步解釋:

1. public ActionResult Index2(int page = 1)

  • 這是一個公開的 ActionResult 方法,表示這是一個用於處理網頁請求的控制器方法。
  • 方法名為 Index2
  • int page = 1:這是一個帶有默認值的參數,表示當前的分頁頁碼,默認為第 1 頁。如果用戶沒有提供 page 參數,則使用默認的 1

2. int currentPage = page < 1 ? 1 : page;

  • 這行代碼使用了三元運算符,確保頁碼不能小於 1。
  • 如果 page 小於 1,currentPage 被設置為 1;否則,它將使用傳入的 page 參數。

3. var products = _db2.Products2.OrderBy(m => m.ProductID).ToList();

  • 這里從數據庫上下文 _db2 中獲取 Products2 表的所有產品,並按 ProductID 升序排列。
  • OrderBy(m => m.ProductID):根據 ProductID 排序。
  • ToList():將查詢結果轉換為一個 List,即一個可枚舉的產品列表。

4. var result = products.ToPagedList(currentPage, pageSize);

  • 這行代碼將 products 列表進行分頁處理。
  • ToPagedList 是一個分頁擴展方法,它將大列表按頁分成小列表,通常需要傳入當前頁 currentPage 和每頁顯示的數量 pageSize
  • pageSize 可能是一個事先定義的變量,決定了每頁顯示多少條記錄。

5. return View(result);

  • 這一行將分頁後的產品列表 result 傳遞給視圖,顯示在前端頁面上。

總結

  • 這個方法的作用是獲取產品數據,按照 ProductID 排序後,根據傳入的分頁參數(page)進行分頁處理,並將結果傳遞給視圖用於顯示。

產生畫面View

https://ithelp.ithome.com.tw/upload/images/20240915/20119035GrEFrmbo0R.png

產生的程式碼
https://ithelp.ithome.com.tw/upload/images/20240915/20119035qUDWcX3RoE.png

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "Contact12";
}

<div class="farm-wrapper">

    <h3>作品-奢華網站</h3>
    <h3>建置中</h3>

    <div class="farm-content">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="css/style.css">
            <link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
            @section styles {
                <link rel="stylesheet" href="@Url.Content("~/Content/css/farm-style.css")">
            }

            <title>奢華風格網站</title>
            <style>
                /* 全域樣式 */
                body {
                    font-family: 'Playfair Display', serif; /* 高級字體 */
                    background-color: #121212;
                    color: #e5e5e5;
                    margin: 0;
                    padding: 0;
                }

                /* 標題樣式 */
                h1 {
                    font-size: 60px;
                    color: #d4af37; /* 金色 */
                    text-align: center;
                    margin-top: 50px;
                }

                /* 導航樣式 */
                nav ul {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                    text-align: center;
                    background-color: #222;
                }

                nav li {
                    display: inline-block;
                    margin: 0 15px;
                }

                nav a {
                    text-decoration: none;
                    color: #e5e5e5;
                    padding: 15px 25px;
                    transition: all 0.3s ease;
                }

                    nav a:hover {
                        color: #d4af37;
                        border-bottom: 2px solid #d4af37;
                    }

                /* 英雄區樣式 */
                .hero {
                    text-align: center;
                    background-image: url('hero-image.jpg');
                    background-size: cover;
                    background-position: center;
                    padding: 150px 0;
                }

                    .hero h2 {
                        font-size: 48px;
                        color: #fff;
                        text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
                        margin-bottom: 10px;
                    }

                    .hero p {
                        font-size: 24px;
                        color: #ccc;
                    }

                /* 產品區樣式 */
                .products {
                    max-width: 1000px;
                    margin: 0 auto;
                    padding: 60px 0;
                    text-align: center;
                }

                .slider {
                    display: flex;
                    justify-content: space-around;
                }

                .slide {
                    width: 30%;
                    padding: 20px;
                    background-color: #333;
                    color: #fff;
                    transition: transform 0.5s ease;
                }

                    .slide.active {
                        transform: scale(1.1);
                        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
                    }
            </style>
        </head>
        <body>
            <header>
                <h1>奢華品牌</h1>
                <nav>
                    <ul>
                        <li><a href="#">首頁</a></li>
                        <li><a href="#">產品</a></li>
                        <li><a href="#">關於我們</a></li>
                        <li><a href="#">聯絡我們</a></li>
                    </ul>
                </nav>
            </header>

            <main>
                <div class="hero">
                    <img src="~/templates/date_img.jpg" alt="My Photo" style="width: 200px; height: auto; float: left; " />
                    <h2>探索奢華</h2>
                    <p>品味頂級生活</p>
                </div>

                <section class="about-us">
                    <h2>關於我們</h2>
                    <p>我們的品牌創立於2024年,致力於提供頂級品質的奢華產品。我們的使命是將卓越的工藝和獨特的設計融合,為每一位顧客帶來無與倫比的體驗。</p>
                    <p>我們的願景是成為全球領先的奢華品牌,提供創新且經典的產品,讓每一位顧客都能感受到我們的獨特魅力。</p>
                </section>

                <section class="products">
                    <h2>我們的產品</h2>
                    <div class="slider">
                        <div class="slide active">
                            <h3>產品 1</h3>
                            <p>這是一款融合了現代設計和傳統工藝的奢華產品,采用高品質的材料,細節精緻,完美展現您的品味。</p>
                        </div>
                        <div class="slide">
                            <h3>產品 2</h3>
                            <p>我們的產品 2 結合了創新的技術和精湛的工藝,為您帶來無與倫比的舒適體驗和高端感受。</p>
                        </div>
                        <div class="slide">
                            <h3>產品 3</h3>
                            <p>產品 3 是我們最受歡迎的款式之一,其獨特的設計和優質的材料,使其成為任何場合的完美選擇。</p>
                        </div>
                    </div>
                </section>

                <section class="testimonials">
                    <h2>客戶評價</h2>
                    <blockquote>
                        <p>“這個品牌的產品真是太棒了!每次使用都感覺到奢華與舒適。” - 張小姐</p>
                    </blockquote>
                    <blockquote>
                        <p>“我非常滿意我的購物體驗,服務一流,產品質量超出預期。” - 李先生</p>
                    </blockquote>
                </section>

                <section class="news">
                    <h2>最新消息</h2>
                    <article>
                        <h3>新品發布:奢華系列 2024</h3>
                        <p>我們很高興宣布即將推出全新奢華系列,包含多款精美設計的產品,敬請期待!</p>
                        <a href="#">閱讀更多</a>
                    </article>
                    <article>
                        <h3>品牌故事:從創立到現在</h3>
                        <p>了解我們的品牌歷程和未來展望,探索我們如何成為領先的奢華品牌。</p>
                        <a href="#">閱讀更多</a>
                    </article>
                </section>
            </main>

           
            <script>
                const slides = document.querySelectorAll('.slide');
                let currentSlide = 0;

                const nextSlide = () => {
                    slides[currentSlide].classList.remove('active');
                    currentSlide = (currentSlide + 1) % slides.length;
                    slides[currentSlide].classList.add('active');
                };

                // 定時切換
                setInterval(nextSlide, 3000);
            </script>
        </body>
        </html>

解釋程式碼:
這段代碼是一個 ASP.NET MVC 的視圖文件,使用了 Razor 語法和 PagedList 擴展庫來顯示分頁的產品列表。我們來逐步解釋它的組成部分:

1. @*@model IEnumerable<WebApplication5.Models.Products> *@

  • 這是一行注釋代碼,原本用於聲明視圖的數據模型類型(IEnumerable<WebApplication5.Models.Products>),表示視圖將接收 Products 對象的集合。

2. @model IPagedList<WebApplication5.Models.Products>

  • 這一行是實際使用的模型聲明,IPagedList<WebApplication5.Models.Products> 表示這個視圖使用了分頁的 Products 列表,IPagedListPagedList 庫提供的接口,支持分頁的功能。

3. @using PagedList@using PagedList.Mvc

  • 這兩行代碼導入了用於分頁的命名空間。PagedList 提供了分頁處理功能,而 PagedList.Mvc 提供了分頁的輔助方法(如 PagedListPager)。

4. <p> @*@Html.ActionLink("Create New", "Create")*@ </p>

  • 這一行包含了一個注釋的代碼,原本用於生成一個“創建新產品”的鏈接。

5. <table class="table">

  • 創建了一個 HTML 表格來顯示產品列表。class="table" 可能用於附加樣式(比如引入 Bootstrap 表格樣式)。

6. 表格標題部分

<tr>
    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().ProductName)</th>
    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().SupplierID)</th>
    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().CategoryID)</th>
    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().QuantityPerUnit)</th>
    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().UnitPrice)</th>
    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().UnitsInStock)</th>
    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().UnitsOnOrder)</th>
    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().ReorderLevel)</th>
    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().Discontinued)</th>
    <th></th>
</tr>
  • 這里是表格的標題行,使用 @Html.DisplayNameFor 自動獲取 Products 模型中字段的顯示名稱。
  • FirstOrDefault()Products 集合中的第一個元素來獲取字段名稱,只用來展示標題。

7. 數據行部分

@foreach (var item in Model)
{
    <tr>
        <td>@Html.DisplayFor(modelItem => item.ProductName)</td>
        <td>@Html.DisplayFor(modelItem => item.SupplierID)</td>
        <td>@Html.DisplayFor(modelItem => item.CategoryID)</td>
        <td>@Html.DisplayFor(modelItem => item.QuantityPerUnit)</td>
        <td>@Html.DisplayFor(modelItem => item.UnitPrice)</td>
        <td>@Html.DisplayFor(modelItem => item.UnitsInStock)</td>
        <td>@Html.DisplayFor(modelItem => item.UnitsOnOrder)</td>
        <td>@Html.DisplayFor(modelItem => item.ReorderLevel)</td>
        <td>@Html.DisplayFor(modelItem => item.Discontinued)</td>
    </tr>
}
  • 這里是使用 foreach 循環遍歷 Model(即分頁後的 Products 列表),為每個 item 生成一行數據。
  • 使用 @Html.DisplayFor 顯示產品的各個字段內容,如 ProductName, SupplierID, CategoryID 等。

8. 分頁部分

@Html.PagedListPager(Model, page => Url.Action("Index2", new { page }))
  • @Html.PagedListPagerPagedList.Mvc 提供的分頁導航控件。
  • 它根據 Model(即 IPagedList)來生成分頁導航鏈接,並且會生成調用 Index2 方法的 URL,通過 page 參數指定當前頁碼。

總結

  • 這個視圖用來顯示分頁後的產品列表,支持對產品信息的表格展示,並使用 PagedListPager 控件實現分頁功能。

跟按紐連結_影片
https://laihao2.com/Home/Contact2
這裡社群媒體>按 影片
https://ithelp.ithome.com.tw/upload/images/20240915/20119035J9rwGZwtua.png
這裡沒有用到資料庫所以只有

Controllers裡面的Entities>

public ActionResult Contact2()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

解釋程式碼
這段代碼是一個 ASP.NET MVC 控制器中的 Contact2 方法,用於處理與 "Contact" 頁面相關的請求。我們來逐步解釋它的結構和功能:

1. public ActionResult Contact2()

  • 這是一個公開的 ActionResult 方法,意味著它可以通過 HTTP 請求訪問。
  • 方法名為 Contact2,通常與 "Contact" 頁面相關聯,但這里用了不同的名稱 Contact2,可能是另一個類似的頁面。
  • 它不接受任何參數。

2. ViewBag.Message = "Your contact page.";

  • 這一行使用了 ViewBag,它是一個動態對象,允許你在控制器中向視圖傳遞數據。
  • ViewBag.Message 被設置為 "Your contact page.",這條消息可以在視圖中顯示,通常用於頁面標題或說明文本。

3. return View();

  • 這行代碼表示返回一個視圖,它會去尋找與控制器和方法名稱匹配的視圖文件。默認情況下,它會尋找名為 Contact2.cshtml 的視圖文件。
  • View() 方法會將 ViewBag 中的數據一起傳遞給視圖。

總結

  • 這個方法的作用是處理對 Contact2 頁面(類似“聯系我們”頁面)的請求,設置一條消息,並將頁面渲染給用戶。

產生畫面View

@{
    ViewBag.Title = "Contact2";
}
<h3></h3>
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
    <title>程式教學</title>
    <style>
        img {
            border-radius: 50%;
        }

        body {
            background-color: lightskyblue;
            margin: 0;
            padding-top: 60px; /* 為導覽列騰出空間 */
        }

        .content-container {
            text-align: center;
            max-width: 600px;
            margin: 0 auto; /* 水平居中 */
            padding: 20px;
        }

        dl {
            margin-left: 20px;
        }

        dd {
            margin-left: 20px;
        }

        .button-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
        }

        .pink-button {
            background-color: pink;
            color: black;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            display: inline-block;
            text-align: center;
            transition: background-color 0.3s;
            width: 200px;
        }

            .pink-button:hover {
                background-color: #ff69b4;
            }
    </style>
</head>
<body>
    <div class="content-container">
        <h1>程式教學</h1>
        <p>
            <img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" />
        </p>
        <p>
            因為有實戰經驗,因此也可以教學程式,<br>
            歡迎大家觀賞我的相關作品影片!
        </p>
        <div class="button-container">
            <a href="https://www.youtube.com/watch?v=w92Ja66w5os" class="pink-button">Asp.net教學影片</a>
            <a href="https://www.youtube.com/watch?v=WDVCQnh2LEk" class="pink-button">Java教學影片1</a>
            <a href="https://www.youtube.com/watch?v=VjkGPFXigqo" class="pink-button">Java教學影片2</a>
        </div>
    </div>
</body>
</html>

解釋程式碼
這段代碼是一個 ASP.NET MVC 視圖文件,結合了 HTML 和 Razor 語法,主要用於顯示一個程式教學頁面。它使用 CSS 來控制頁面的樣式,添加了圖片、文本和幾個鏈接按鈕,指向外部的教學影片。我們來逐步解析它的內容:

1. @{ ViewBag.Title = "Contact2"; }

  • 這行代碼使用 Razor 語法將 ViewBag.Title 設置為 "Contact2",這是頁面的標題。
  • 它會影響頁面的 <title> 標簽,通常顯示在瀏覽器標簽頁上。

2. <h3></h3>

  • 這是一個空的 <h3> 標題標簽,雖然沒有內容,但可以在以後填入標題文本。可以刪除或填入合適的標題。

3. <!DOCTYPE html> ... <html lang="zh-Hant-TW">

  • 聲明文檔的類型為 HTML5,並指定網頁語言為繁體中文(zh-Hant-TW 表示台灣繁體中文)。

4. <meta charset="UTF-8">

  • 設置網頁的字符編碼為 UTF-8,確保網頁支持多語言字符集。

5. <link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">

  • 引入了一個外部樣式表 reset.css,通常用於重置瀏覽器的默認樣式,以保證不同瀏覽器之間的顯示一致性。
  • @Url.Content() 是 Razor 語法,用來生成項目內資源的正確 URL。

6. 內嵌的 CSS 樣式

  • 設置了全局的樣式,定義了頁面元素的外觀。
    • img { border-radius: 50%; }:將圖片圓角化,形成圓形。
    • body { background-color: lightskyblue; }:將頁面背景色設置為淺天藍色,頁面頂部留有 60px 空白,以騰出空間。
    • content-container { text-align: center; max-width: 600px; margin: 0 auto; }:容器居中,寬度不超過 600px。
    • dldd:定義列表的樣式。
    • .button-container { display: flex; flex-direction: column; }:按鈕容器使用 flex 布局,垂直排列按鈕並設置間距。
    • .pink-button { background-color: pink; }:按鈕的初始顏色為粉紅色,懸停時變為亮粉色。

7. 頁面主體內容

  • <div class="content-container">:這是頁面的主要容器,內容包括標題、圖片、介紹文本和教學影片按鈕。
    • <h1>程式教學</h1>:主標題為“程式教學”。
    • <img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" />:顯示一張圖片,寬度為 200px,且根據寬度自動調整高度,border-radius 將使圖片呈圓形。
    • <p>:介紹部分的文本內容,用 <br> 強制換行。文中介紹作者有實際的程式教學經驗。
    • <div class="button-container">:包含三個教學影片的鏈接按鈕。
      • 每個 <a> 標簽表示一個鏈接,使用 .pink-button 樣式,使按鈕有一致的外觀和懸停效果。

8. 影片鏈接按鈕

  • 每個按鈕都是指向外部的教學影片:
    • 第一個按鈕指向 ASP.NET 的教學影片。
    • 第二和第三個按鈕分別指向兩個 Java 教學影片。

總結

  • 這個頁面展示了作者的程式教學內容,包含了文字介紹、圖片以及三個鏈接按鈕,供用戶點擊觀看程式教學影片。

大家明天見~
/images/emoticon/emoticon01.gif


上一篇
新增功能
下一篇
品牌/童趣網站
系列文
asp.net可以變出那些功能30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言